<template>
  <div class="materialManagementCont">
    <div class="newArticleStyle">
      <Button style="margin-right:10px;" type="primary" @click="articleAddFun('add')"
        v-if="unlocking('0107030100')">新增文章</Button>
      <Badge dot :count="count"> <Button type="primary" @click="getConfigArticle"
          v-if="unlocking('0107030400')"> 置业计划书配置 </Button> </Badge>
      <Button style="margin-left:10px;" type="primary"> <a
          href="https://images.tospurfang.com/doc/%E7%B4%A0%E6%9D%90%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
          style="color:#fff;" target="_blank">查看操作指引</a>
      </Button>
      <div v-if="hasTask" style="margin: 5px 0 0 10px;">每月需更新一次“置业计划书配置”，完成置业计划书维护任务</div>
    </div>
    <dt-grid ref="table" :page="pageData" :onFetch='onFetch' />
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      @previewEr="previewEr" :sourcedata="sourcedata" :targetdata="targetdata"
      :preview="preview" :infoText='infoText'></dynamic-header>

    <Modal v-model="erFlag" title="置业计划书预览" width="400" :footer-hide="true">
      <div class="textAlign">请使用手机扫码，预览置业计划书完整效果</div>
      <div class="detailsCon">

        <div id="qrcode" class="qrcode" ref="qrcode"></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import taskMgr from '@/biz/UdealTask/task.js'
  import infoMgr from '@/biz/base/info'
  import articleMgr from '@/biz/article/article'
  import columns from './columns'
  import QRCode from 'qrcodejs2-fix'
  export default {
    components: {
      dynamicHeader,
    },
    data() {
      return {
        infoText: {
          text1: '置业计划书配置',
          text2: '未在置业计划书中展示',
          text3: '已在置业计划书中展示'
        },
        erFlag: false,
        preview: true,
        sourcedata: [],
        targetdata: [],
        count: 1,
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50],
        },
        H5Url: "",
        from: '',
        hasTask: false
      }
    },
    methods: {
      previewEr(val) {
        this.erFlag = true
        let articleIdList = []
        val.forEach(item => {
          articleIdList.push(item.articleId)
        })
        let articleIds = articleIdList.join(',')
        let url =
          `${this.H5Url}/market/#/pages_com/report/preview?articleIds=${articleIds}&buildingId=${this.$dt.buildInfo().housesId}`
        console.log(url, '我是h5的url');
        this.$nextTick(() => {
          document.getElementById('qrcode').innerHTML = '';
          this.qrCode = new QRCode('qrcode', {
            width: 200, // 设置宽度，单位像素
            height: 200, // 设置高度，单位像素
            text: url // 设置二维码内容或跳转地址
          });
        })
      },
      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },
      headUpdate(val) {
        console.log(val, 'vvvvvvvv');
        val.forEach((item, index) => {
          item.sort = index
        })
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          list: val
        }
        articleMgr.updateConfigArticle(params).then((res) => {
          this.$refs.dynamicHeader.hide()
          this.initData()

        })
      },
      onFetch(data) {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          createdTimeSort: 2,
          ...data
        }
        return infoMgr.list(params)
          .then((res) => {
            return res
          })
      },
      initData() {
        this.$refs.table.fetch()
      },
      // 查看
      viewClick() {
        this.$router.push({
          path: '/customerManagement_center/allCustomers/details',
        })
      },
      checkHasUnConfigArticle() {
        articleMgr.checkHasUnConfigArticle({
          buildingId: this.$dt.buildInfo().housesId
        }).then((res) => {
          this.count = res ? 1 : 0
        })
      },
      // 获取文章标题
      getConfigArticle() {
        this.$refs.dynamicHeader.show()
        articleMgr.getConfigArticle({ buildingId: this.$dt.buildInfo().housesId, }).then((
          res) => {
          this.count = 0
          console.log(res, '取消红点和文章标题')
          this.sourcedata = res.noConfigArticle.map((itm) => {
            itm.dbKey = itm.articleId
            itm.fieldValue = itm.articleTitle
            itm.disabled = !itm.hasDrag
            return itm
          })
          this.targetdata = res.configArticle.map((itm) => {
            itm.dbKey = itm.articleId
            itm.fieldValue = itm.articleTitle
            return itm
          })
        })
      },
      viewReason(rows) {
        articleMgr.articleReason({ articleId: rows.articleId }).then((res) => {
          this.$Modal.info({
            title: '驳回原因',
            content: res || '-',
            okText: '关闭',
          })
        })
      },
      // 删除
      deleteFun(rows) {
        this.$Modal.confirm({
          title: '删除',
          content: '确定删除吗？',
          onOk: () => {
            articleMgr.articleDelete({ articleId: rows.articleId }).then((res) => {
              this.$Message.success('文章删除成功！')
              this.initData()
            })
          },
        })
      },
      articleEditFun(rows) {
        this.$router.push({
          path: '/marketingCenter/propertyReport/articleManagement/addEditArticlePage',
          query: { type: 'edit', articleId: rows.articleId },
        })
      },
      articleViewFun(rows) {
        this.$router.push({
          path: '/marketingCenter/propertyReport/articleManagement/viewArticlePage',
          query: { type: 'view', articleId: rows.articleId },
        })
      },
      // 新增文章
      articleAddFun() {
        this.$router.push({
          path: '/marketingCenter/propertyReport/articleManagement/addEditArticlePage',
          query: { type: 'add' },
        })
      },
    },
    created() {

      // let dtUrl = this.$dt.env.dtUrl;
      // if (dtUrl.indexOf('dtwgwtest') != -1) {
      //   this.H5Url = 'https://dtwebtest.tospur.com/'

      // } else if (dtUrl.indexOf('dtgwuat') != -1) {
      //   this.H5Url = 'https://dtwebuat-new.tospurfang.com/'
      // } else if (dtUrl.indexOf('dtgw') != -1) {
      //   this.H5Url = 'https://dtweb.tospurfang.com/'
      // } else {
      //   this.H5Url = ''
      // }

      this.H5Url = this.$dt.env.h5Url

      this.checkHasUnConfigArticle()
    },
    mounted() {
      this.$refs.table.init(this, new columns(this))
      this.$refs.table.fetch()
      this.from = this.$route.params.type
      taskMgr.taskCount({ buildingId: this.$dt.buildInfo().housesId }).then(res => {
        console.log(res, '111111111111');
        this.hasTask = res > 0
        // this.hasTask = res.some(item => {
        //   if (item.taskType.indexOf(17) > -1 && Number(item.taskCount) > 0) {
        //     return true
        //   } else {
        //     return false
        //   }
        // })
      })
    },
  }
</script>
<style lang="scss" scoped>
  .materialManagementCont {
    padding: 10px 14px;

    .newArticleStyle {
      padding: 10px 14px;
      display: flex;
      flex-direction: row;
    }
  }

  .textAlign {
    text-align: center;
    margin-top: 20px;
  }

  .detailsCon {
    display: flex;

    .qrcode {
      margin: 10px auto;
      padding-bottom: 30px;
    }

  }
</style>